layui.use(['laypage', 'layer'], function () {
    var laypage = layui.laypage
        , layer = layui.layer;

    let cuisineId = sessionStorage.getItem("cuisineId");
    //根据菜系id得到当前菜系的总条数

    page(cuisineId);

    function page(cuisineId) {
        let count = myAjax("/getCountForProductPage", {cuisineId: cuisineId}, "get");
        //总页数低于页码总数
        laypage.render({
            elem: 'page'
            , count: count //数据总数
            , jump: function (obj) {
                findProductByCuidineId(cuisineId, obj.curr, 8);
            }
        });
    }

    findCuisine();

    function findCuisine() {
        let res = myAjax("/cuisine/findAll", {isShow: 1}, "get");
        // console.log(res);
        if (res != null) {
            setCuisineData(res);
        }

    }

    function setCuisineData(data) {
        let str = '';
        for (let i = 0; i < data.length; i++) {
            str += '<div id="cuisine' + data[i].id + '" onclick="findProductByCuidineId(' + data[i].id + ',1,8)">' + data[i].title + '</div>';
        }
        $("#cuisine").html(str);
        //只有菜系显示出来以后，才能去数据库根据菜系id查询数据


        findProductByCuidineId(cuisineId, 1, 8);

    }

    function findProductByCuidineId(id, page, limit) {
        let res = myAjax("/product", {whereShow: 3, cuisineId: id, page: page, limit: limit}, "get");
        console.log(res)
        if (res != null) {
            setProductData(res);
        }
        // 这里设置菜系的背景颜色
        $("#cuisine >div").each(function (index, obj) {
            $(this).css({"color": "black", "background-color": "rgb(243, 243, 243)"})
        });
        $("#cuisine" + id).css({"color": "white", "background-color": "rgb(230, 144, 57)"});
    }

    function setProductData(data) {
        let str = '';
        for (let i = 0; i < data.length; i++) {
            str += '<div>\n' +
                '                        <div><img src="' + data[i].imgHref + '"></div>\n' +
                '                        <div class="font-title single-over">' + data[i].name + '</div>\n' +
                '                        <div>\n' +
                '                            <div class="font-content">价格：</div>\n' +
                '                            <div class="price">4:00</div>\n' +
                '                        </div>\n' +
                '                        <div class="font-content many-over-three">原料：蚂蚁，树，油盐酱醋茶</div>\n' +
                '                    </div>';
        }
        $("#product").html(str)


    }
})

